<template>
	<view class="f24r col313131 minH100v poRel pb100r boSiBorBox">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="茶室详情" back @onBack="goBack" goHome
		></navbar>
		<view class="p20r">
			<view class="pl10r pr10r pt10r pb30r backColWhite borRad10r bSha0010u0rgb00001">
				<swiper class="h350r" :indicator-dots="true" :autoplay="true">
					<swiper-item v-for="(item, index) in optionItem.banList" :key="index">
						<image :src="item" mode="aspectFill"
							class="wPer100 hPer100 borRad10r"
							@click="cliBannerImg(item, optionItem.banList)"
						></image>
					</swiper-item>
				</swiper>
				<view class="disFlex aliItCenter mt20r">
					<view class="flex1 foWeiBold f30r">
						{{optionItem.name ? optionItem.name : ''}}
					</view>
					<!-- <view class="teAliRight col606060 w150r">
						已售2235份
					</view> -->
				</view>
				<view class="disFlex aliItCenter mt15r">
					<view class="w40r pr10r">
						<image :src="baseUrl + 'iconLocaLightGreen.png'" mode="aspectFit"
							class="w40r h40r"
						></image>
					</view>
					<view class="flex1">
						{{optionItem.address ? optionItem.address : ''}}
					</view>
					<view class="pl10r col606060 teAliRight">
						距我：{{optionItem.distance}}km
					</view>
				</view>
				<view class="disFlex aliItCenter mt15r">
					<view class="w40r pr10r">
						<image :src="baseUrl + 'iconClockOrange.png'" mode="aspectFit"
							class="w40r h40r poRel top4r"
						></image>
					</view>
					<view class="flex1">
						营业时间：00:00 ~ 24:00
					</view>
					<view class="w180r col606060 teAliRight"
						@click="cliPhoneGreen"
					>
						<view class="teAliCenter col747474 lh50r borRad25r bSha0020u0rgb00002">
							<image :src="baseUrl + 'iconPhoneGreen.png'" mode="aspectFit"
								class="w40r h40r ml16r mt5r floLeft"
							></image>
							联系商家
						</view>
					</view>
				</view>
				<view class="disFlex mt15r">
					<view class="w40r pr10r">
						<image :src="baseUrl + 'iconBookingInstructions.png'" mode="aspectFit"
							class="w40r h40r"
						></image>
					</view>
					<view class="w120r lh40r">
						茶室介绍：
					</view>
					<view class="flex1 pt5r">
						{{optionItem.introduce}}
					</view>
				</view>
			</view>
			<view class="f30r foWeiBold col99c043 lh100r poRel mb20r">
				房间列表
				<text class="poAbs bom16r left38r backCol99c043 w50r h4r"
				></text>
			</view>
			<view class="backColWhite borRad10r lh100r teAliCenter col999" v-if="!roomList.length">
				该茶室暂无开放房间
			</view>
			<view class="backColWhite borRad10r bor1S99c043 p20r mb50r poRel"
				v-for="(item1, index1) in roomList" :key="item1.id"
				@click="cliRoomFun(item1)"
			>
				<view class="disFlex">
					<view class="w150r h150r poRel borRad10r overHid">
						<image :src="item1.picZero" mode="aspectFill"
							class="wPer100 hPer100"
							@click.stop="cliRoomImg(item1.pic)"
						></image>
						<view :class="['poAbs', 'left0', 'bom0', 'wPer100', 'teAliCenter', 'f24r', 'boSiBorBox', 'h40r',
								item1.is_idle == 1 ? 'lh40r colFff backImgLiGrTR2c6739a99c043' : 'col999 backColWhite bor2S99c043'
							]"
						>
							<image src="/static/icons/iconClockGray.png" mode="aspectFit"
								class="w25r h25r poRel top2s5r" v-if="item1.is_idle != 1"
							></image>
							{{
								item1.is_idle == 1 ? '空闲' :
								item1.is_idle == 2 ? '使用中' :
								item1.is_idle == 3 ? '待保洁' : item1.is_idle
							}}
						</view>
					</view>
					<view class="flex1 pl20r">
						<view class="f28r foWeiBold webLiCl1 webBoxOrVer overHid disWebBox mb10r">
							{{item1.name}}
						</view>
						<view>
							<view class="disInBlo wPer50 colFf3627">
								会员¥{{item1.vip_price}}/小时
							</view>
							<view class="disInBlo wPer50 col999">
								原价¥{{item1.price}}/小时
							</view>
						</view>
						<view class="disFlex aliItCenter mt10r">
							<view class="w150r">
								<view class="disInBlo lh40r pr10r borRad5r f20r col999">
									{{item1.people_count}}人使用
								</view>
							</view>
							<view class="flex1 teAliRight foWei500">
								<view @click.stop="cliAdvanceReservation(item1.tid, item1.id, item1.hour, item1.set_meal_type, item1.card_discount, item1.price)"
									class="w150r col99c043 teAliCenter lh57r borRad10r bor1S99c043 disInBlo boSiBorBox"
								>
									提前预订
								</view>
								<view @click.stop="cliUseNow(item1.tid, item1.id, item1.hour, item1.set_meal_type, item1.card_discount, item1.price)"
									class="w150r colFff teAliCenter lh60r borRad10r backCol99c043 disInBlo ml20r"
								>
									马上使用
								</view>
							</view>
						</view>
					</view>
				</view>
				<progressBar :progressObj="{tid: item1.tid, rid: item1.id}"
				></progressBar>
				<view class="f24r colFff backImgLiGrTR2c6739a99c043 poAbs topn24r left20r pl20r pr20r lh40r borBRRad44r borTLRad5 borBLRad5">
					{{item1.hour}}小时起订
				</view>
			</view>
		</view>
		<view class="bSha0010u0rgb00001 wPer100 h130r poFixed left0 bom0 backColWhite disFlex teAliCenter col99c043 aliItCenter">
			<view class="flex1" @click="cliBomBtn(0)">
				<image :src="baseUrl + 'iconComeRecharge.png'" mode="aspectFit"
					class="w50r h50r"
				></image>
				<view>
					充值优惠
				</view>
			</view>
			<view class="flex1" @click="cliBomBtn(1)">
				<image :src="baseUrl + 'iconVipCrad.png'" mode="aspectFit"
					class="w50r h50r"
				></image>
				<view>
					购买会员
				</view>
			</view>
			<view class="flex1" @click="cliBomBtn(2)">
				<image src="/static/icons/iconWifiGreen.png" mode="aspectFit"
					class="w50r h50r"
				></image>
				<view>
					门店WiFi
				</view>
			</view>
		</view>
		<view class="poFixed wPer100 hPer100 backCol0a0a0aS5 zIndex1 top0 left0"
			v-show="wifiFrame" @touchmove.stop.prevent
		>
			<view class="poFixed top50P left50P trTrn50Pn50P backColWhite borRad10r w700r bSha0010u0rgb00001">
				<view class="lh100r poRel foWeiBold f30r teAliCenter">
					<text>
						门店WiFi
					</text>
					<image src="/static/icons/iconClose.png" mode="aspectFit"
						class="w50r h50r poAbs rig20r top26r" @click="wifiFrame = false"
					></image>
				</view>
				<scroll-view class="h800r p20r boSiBorBox backColF5f5f5 f24r borRad10r" scroll-y="true">
					<view class="disFlex mb20r bor1SF5f5f5 backColWhite bSha0010u0rgb00001 p20r borRad10r aliItCenter"
						v-for="(item, index) in wifiList" :key="index"
					>
						<view class="flex1">
							<view class="disFlex">
								<view class="w150r col999">
									房间名称：
								</view>
								<view class="flex1">
									{{item.name}}
								</view>
							</view>
							<view class="disFlex mt20r">
								<view class="w150r col999">
									WiFi名称：
								</view>
								<view class="flex1">
									{{item.wifiName ? item.wifiName : '（未设置WiFi名称）'}}
								</view>
							</view>
							<view class="disFlex mt20r">
								<view class="w150r col999">
									WiFi密码：
								</view>
								<view class="flex1">
									{{item.wifiPsd ? item.wifiPsd : '（未设置WiFi密码）'}}
								</view>
							</view>
						</view>
						<view class="w150r teAliRight">
							<view class="w120r lh50r disInBlo teAliCenter boSiBorBox bor1S99c043 col99c043 borRad10r mb20r"
								@click="cliCopyPsd(item.wifiPsd)"
							>
								复制密码
							</view>
							<view class="w120r lh50r disInBlo teAliCenter backImgLiGrTR2c6739a99c043 colFff borRad10r"
								@click="cliOneBtnConnection(item.wifiName, item.wifiPsd)"
							>
								一键连接
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<rightOffPage v-show="rightOffFrame" @closeRightOff="closeRightOff"
			:rightOffObj="rightOffObj" ref="rightOffPage"
		></rightOffPage>
		<advanceBookingPage v-show="advanceBookingFrame" ref="advanceBookingPage"
			@closeAdvanceBooking="closeAdvanceBooking"
			:advanceBookingObj="advanceBookingObj"
		></advanceBookingPage>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import progressBar from '@/components/progressBar.vue'
import rightOffPage from '@/components/rightOffPage.vue'
import advanceBookingPage from '@/components/advanceBookingPage.vue'
import { isMemberGetTeaRoomList, buriedPoint,
	isMemberGetTeaDetail } from '@/utils/api.js'
import { baseUrl, imgNetUrl } from '@/utils/request.js'
export default {
	components: { navbar, progressBar, rightOffPage, advanceBookingPage },
	data() {
		return {
			baseUrl,
			optionItem: {},
			roomList: [],
			wifiFrame: false, wifiList: [],
			rightOffFrame: false,
			rightOffObj: {
				topIsWho: 1,
				hourMin: '',
				hourMax: 24,
				tid: '',
				rid: '',
				setMealId: '',
				setMealMoney: 0,
				cardDiscount: '',
				originalCost: ''
			},
			advanceBookingFrame: false,
			advanceBookingObj: {
				topIsWho: 1,
				tid: '',
				rid: '',
				hour: '',
				setMealId: '',
				setMealMoney: 0,
				cardDiscount: '',
				originalCost: ''
			},
		}
	},
	onLoad(options) {
		if(options.item1) {
			if(options.type == 1) {
				this.optionItem = JSON.parse(options.item1)
				this.getDataList1();
			}else if(options.type == 2) {
				let lngAndLat = uni.getStorageSync('lngAndLat');
				isMemberGetTeaDetail({
					tid: options.item1,
					lng: lngAndLat.longitude, lat: lngAndLat.latitude
				}).then(res1 => {
					console.log(222, res1)
					this.optionItem = res1.data;
					this.getDataList1();
				})
			}
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		getDataList1() {
			if(this.optionItem.banner) {
				let banList = [];
				this.optionItem.banner.split(',').forEach(item => {
					banList.push(imgNetUrl + item);
				})
				this.optionItem.banList = banList;
			}else {
				this.optionItem.banList = ['/static/images/logo.png'];
			}
			this.optionItem.distance = Number(this.optionItem.distance).toFixed(2);
			if(uni.getStorageSync('token')) {
				buriedPoint({
					token: uni.getStorageSync('token'),
					tid: this.optionItem.id
				}).then(res => { })
			}
			isMemberGetTeaRoomList({
				tid: this.optionItem.id, number: 100
			}).then(res => {
				if(res.data && res.data.data.length) {
					res.data.data.forEach(item => {
						item.vip_price = Math.round(Number(item.card_discount) * Number(item.price) * 100) / 100;
						if(item.pic && item.pic != '') {
							item.picZero = imgNetUrl + item.pic.split(',')[0];
						}else {
							item.picZero = '/static/images/logo.png';
						}
					})
					this.roomList = res.data.data;
				}
			})
		},
		cliBannerImg(itemUrl, urls) {
			let current = 0;
			urls.forEach((item, index) => {
				if(itemUrl == item) current = index;
			})
			uni.previewImage({
				current, urls
			})
		},
		cliRoomImg(item1Pic) {
			let urls = [];
			if(item1Pic) {
				item1Pic.split(',').forEach(item => {
					urls.push(imgNetUrl + item)
				})
			}else {
				urls = ['/static/images/logo.png'];
			}
			uni.previewImage({ current: 0, urls })
		},
		cliPhoneGreen() {
			if(this.optionItem != '{}' && this.optionItem.tel) {
				uni.makePhoneCall({
					phoneNumber: this.optionItem.tel,
					success:res => {
						if(res) console.log(11, res)
					}
				});
			}else {
				uni.showToast({
					title: '暂时找不到商家电话', icon: 'none', duration: 3000
				})
			}
		},
		cliRoomFun(item1) {
			delete item1.remarks;
			uni.navigateTo({
				url: '/pages/index/roomDetail?item=' + JSON.stringify(item1)
			})
		},
		cliUseNow(tid, rid, hour, set_meal_type, cardDiscount, originalCost) {
			if(uni.getStorageSync('token')) {
				if(set_meal_type == 1) {
					uni.showToast({ title: '必购套餐，请进房间选择', icon: 'none', duration: 3000 })
				}else {
					this.rightOffObj.tid = tid;
					this.rightOffObj.rid = rid;
					this.rightOffObj.hourMin = hour;
					this.rightOffObj.cardDiscount = cardDiscount;
					this.rightOffObj.originalCost = originalCost;
					this.rightOffFrame = true;
					this.$refs['rightOffPage'].renovateRight();
				}
			}else {
				uni.navigateTo({ url: '/pages/personalCenter/login?type=2' })
			}
		},
		closeRightOff() {
			this.rightOffFrame = false;
		},
		cliAdvanceReservation(tid, rid, hour, set_meal_type, cardDiscount, originalCost) {
			if(uni.getStorageSync('token')) {
				if(set_meal_type == 1) {
					uni.showToast({ title: '必购套餐，请进房间选择', icon: 'none', duration: 3000 })
				}else {
					this.advanceBookingObj.tid = tid;
					this.advanceBookingObj.rid = rid;
					this.advanceBookingObj.hour = hour;
					this.advanceBookingObj.cardDiscount = cardDiscount;
					this.advanceBookingObj.originalCost = originalCost;
					this.advanceBookingFrame = true;
					this.$refs['advanceBookingPage'].renovateColor();
				}
			}else {
				uni.navigateTo({ url: '/pages/personalCenter/login?type=2' })
			}
		},
		closeAdvanceBooking() {
			this.advanceBookingFrame = false;
		},
		cliBomBtn(type) {
			if(type == 0) {
				this.goUrl('/pages/index/recharge?tid=' + this.optionItem.id);
			}else if(type == 1) {
				this.goUrl('/pages/index/memberCenter');
			}else if(type == 2) {
				this.wifiList = [];
				this.roomList.forEach(item => {
					this.wifiList.push({
						name: item.name,
						wifiName: (item.wifi ? item.wifi.split(',')[0] : ''),
						wifiPsd: (item.wifi ? item.wifi.split(',')[1] : '')
					})
				})
				this.wifiFrame = true;
			}
		},
		goUrl(url) {
			if(uni.getStorageSync('token')) {
				uni.navigateTo({ url })
			}else {
				uni.navigateTo({ url: '/pages/personalCenter/login?type=2' })
			}
		},
		cliCopyPsd(data) {
			if(!data) {
				return uni.showToast({
					title: '该房间未设置WiFi密码', icon: 'none', duration: 3000
				})
			}
			uni.setClipboardData({
				data,
				success:() => {
					// this.wifiFrame = false;
				}
			});
		},
		cliOneBtnConnection(wifiName, wifiPsd) {
			if(!wifiName) return uni.showToast({ title: '该房间未设置WiFi名称', icon: 'none', duration: 3000 })
			if(!wifiPsd) return uni.showToast({ title: '该房间未设置WiFi密码', icon: 'none', duration: 3000 })
			uni.getSystemInfo({// 获取手机型号
				success:res1 => {
					let system = '';
					if(res1.platform == 'android'){
						system = parseInt(res1.platform.substr(8))
					}
					if(res1.platform =='ios'){
						system = parseInt(res1.platform.substr(4))
					}
					if(res1.platform == 'android' && system < 6){
						return uni.showToast({
							title:'手机版本不支持', icon:'none', duration: 3000
						})
					}
					if(res1.platform == 'ios' && system < 11.2){
						return uni.showToast({
							title:'手机版本不支持', icon:'none', duration: 3000
						})
					}
					uni.showLoading({ title: 'WiFi连接中...' })
					uni.startWifi({
						success:res2 => {
							uni.connectWifi({
								SSID: wifiName,
								password: wifiPsd,
								success:res3 => {
									this.wifiFrame = false;
									uni.hideLoading();
									uni.showToast({ title: "连接成功", duration: 3000 })
								},
								fail:err3 => {
									uni.hideLoading();
									uni.showToast({
										title:'连接失败：' + err3.errMsg, icon: 'none', duration: 3000
									})
								}
							})
						},
						fail:err2 => {
							uni.hideLoading();
							uni.showToast({
								title: '连接失败：' + err2.errMsg, icon: 'none', duration: 3000
							})
						}
					})
				}
			})
		},
	}
}
</script>
<style>
</style>